//查询所有题库
<template>
  <div class="manageQuestionnaire">
  <div >
    <a @click="handleClick()" id="ctl01_ContentPlaceHolder1_hrefDelete" class="folderbtn" style="border-bottom: 0;cursor: pointer;"><i class="el-icon-delete"></i><span>回收站</span></a>
<!--    <div class="border">-->
    <div id="ctl01_ContentPlaceHolder1_divInfo" class="fr">
      <input name="searchInputBar" type="text" id="ctl01_ContentPlaceHolder1_txtName" v-model = "fuzzySearchInput.questionName" class="serarchbox" onfocus="if(value=='请输入问卷名进行搜索...'){value='';}"
      onblur="if(value==''){value='请输入问卷名进行搜索...'}" value="请输入问卷名进行搜索..." onkeypress="return searchQ(event);">
      <input type="submit" name="ctl01$ContentPlaceHolder1$btnSub" value="" id="ctl01_ContentPlaceHolder1_btnSub" style="display: none">
      <!-- <i class="search-icon index_iconfont" onclick="btnSub.click()"></i> -->
      <div class="search-icons" style="display:inline-block;cursor: pointer" @click="fuzzySearchQuestionnaire()">
        <i class="el-icon-close" v-show="value" ></i>
        <i class="el-icon-search" v-show="!value" ></i>
      </div>
    </div>

    <div class="questionnaireList" >
    <dl class="questionnaire" v-for="(item,index) in this.resData" :key="index">
      <dt class="item-top">
        <div class="pull-left">
          <a class="describe">{{item.questionName}}</a>
        </div>
        <div class="pull-right">
          <div class="item-id" style="display: inline-block" v-if="answerTimeList != undefined">答题时间：{{answerTimeList[index]}}</div>
          <div class="item-draft" style="display: inline-block" v-if="item.questionStop=== '3' ">
            <i class="nopublic" style="display: inline-block" ></i>未发布</div>
          <div class="item-draft" style="display: inline-block" v-else>
            <i class="nopublic2" style="display: inline-block" ></i>已发布</div>
          <div class="item-sheet" style="display: inline-block">剩余答卷次数：{{item.answerTotal}}<a></a>
            <!-- <div class="item-date" style="display: inline-block">创建时间：{{item.startTime}}</div> -->
          </div>
        </div>
      </dt>
      <dd class="item-bot">
        <div class="process-box pull-left">
          <dl class="process-1 pull-left">
            <dd class="spinner-list"  style="cursor: pointer; ">
              <a><i class="el-icon-edit" ></i>  编辑问卷</a>
            </dd>
          </dl>
          <dl class="process-2 pull-left">
            <dd class="spinner-list" style="cursor: pointer; ">
              <a><i class="el-icon-upload2"></i>  分析&下载</a>
            </dd>
          </dl>
        </div>
        <div class="operation pull-right">
          <a>
            <span v-if="item.questionStop=== '3'" @click="sendQuestionnaire(item.id);link(item);" style="cursor: pointer;"><i class="el-icon-caret-right"></i>  发布</span>
            <span  v-if="item.questionStop=== '2'" style="cursor: pointer; " @click="stopQuestionnaire(item.id);"><i class="el-icon-circle-close"></i>   停止</span>
          </a>

          <a><span style="cursor: pointer; "  @click="deleteQuestionnaire(item.id)"><i class="el-icon-delete" style="color: rgba(255, 99, 71, 0.8)"></i>&nbsp删除</span></a>

          <a @click="preview(item.id)"><span style="cursor: pointer; "><i class="el-icon-view" style="color: rgba(0, 173, 123, 0.8)" ></i>&nbsp&nbsp预览</span></a>
        </div>
      </dd>
    </dl>
  </div>
  </div>

    <div>
      <el-dialog  title="回收站" :visible.sync="Visible" width="80%">
        <div class="questionnaireList" >
          <dl class="questionnaire" v-for="(item,index) in this.recycleData"  :key="index">
            <dt class="item-top">
              <div class="pull-left">
                <a class="describe">{{item.questionName}}</a>
              </div>
              <div class="pull-right">
                <div class="item-id" style="display: inline-block" v-if="answerTimeList != undefined">答题时间：{{answerTimeList[index]}}</div>
                <div class="item-sheet" style="display: inline-block">剩余答卷次数：{{item.answerTotal}}<a></a>
                  <!-- <div class="item-date" style="display: inline-block">创建时间：{{item.startTime}}</div> -->
                </div>
              </div>
            </dt>
            <dd class="item-bot">
              <div class="process-box pull-left">
                <dl class="process-1 pull-left">
                  <dd class="spinner-list"  style="cursor: pointer; ">
                    <a><i class="el-icon-edit" ></i>  编辑问卷</a>
                  </dd>
                </dl>
                <dl class="process-2 pull-left">
                  <dd class="spinner-list" style="cursor: pointer; ">
                    <a><i class="el-icon-upload2"></i>  分析&下载</a>
                  </dd>
                </dl>
              </div>
              <div class="operation pull-right">
                <a>
                  <a>
                    <span @click="recycleQuestionnaire(item.id);" style="cursor: pointer;"><i class="el-icon-refresh"></i>&nbsp&nbsp恢复</span>
                    <!--  <span @click="item.questionStop=item.questionStop+1" v-else style="cursor: pointer; "><i class="el-icon-circle-close"></i>&nbsp&nbsp停止</span>-->
                  </a>
                  <!-- <span @click="item.questionStop=item.questionStop+1" style="cursor: pointer; "><i class="el-icon-refresh"></i>&nbsp&nbsp恢复</span> -->
                </a>
                <a><span style="cursor: pointer; "  @click="finallyDelete(item.id)"><i class="el-icon-delete" style="color: rgba(255, 99, 71, 0.8)"></i>&nbsp删除</span></a>
                <a @click="preview(item.id)"><span style="cursor: pointer; "><i class="el-icon-view" style="color: rgba(0, 173, 123, 0.8)" ></i>&nbsp&nbsp预览</span></a>
                <!-- <a><span style="cursor: pointer; "  @click="deleteQuestionnaire(item.id)"><i class="el-icon-delete" style="color: rgba(255, 99, 71, 0.8)"></i>&nbsp删除</span></a> -->
              </div>
            </dd>
          </dl>
        </div>
      </el-dialog>
    </div>

</div>
</template>

<script>

export default {

  data() {
    return {
      Visible:false,
      resData: [],
      recycleData:[],
      answerTimeList:[],
      pagination: {
        //分页后的考试信息
        current: 1, //当前页
        total: null, //记录条数
        size: 6 //每页条数
      },
      fuzzySearchInput:{
        questionName:''
      }
    };
  },
  created() {
    this.getAnswerInfo();
    this.getRecycleAnswerInfo();
  },
  methods: {
      preview(id){
        console.log(this.form)
        let newPage = this.$router.resolve({ 
        path: '/previewQuestionnaire', 
        query: {
          id: id,
          type: 'test'
       }
     });

      window.open(newPage.href, '_blank');
    },
    // /发布问卷
    sendQuestionnaire(questionId){
      // 更改发布问卷的状态
      this.$axios({
        url: `/api/sendQuestionnaire`,
        method: 'post',
        data: {
          id:questionId
        }
      })
        .then(res => {
          let resData = res.data.data;
          if(resData !=null){
            this.resData = resData
          }
        })
        .catch(error => {});
    },
    finallyDelete(questionId){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios({
          url: `/api/finallyDeleteById`,
          method: 'post',
          data: {
            id:questionId
          }
        });
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.getRecycleAnswerInfo();
        this.getAnswerInfo();

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    stopQuestionnaire(questionId){
      // 更改发布问卷的状态
      this.$axios({
        url: `/api/stopQuestionnaire`,
        method: 'post',
        data: {
          id:questionId
        }
      })
        .then(res => {
          this.getAnswerInfo();
        })
        .catch(error => {});
    },
    // openDelConfirm() {
    //   return this.$confirm("此操作将恢复该问卷, 是否继续?", '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   })
    // },
    // tips(questionId){
    //     this.openDelConfirm().then(() => {
    //       deleteOne().then(res => {
    //         this.$message({
    //           type: 'success',
    //           message: '删除成功!'
    //         })
    //         this.fetchTableData()
    //       })
    //     }).catch(() => {
    //     })
    // },
    handleClick(){
      this.Visible=true;
      this.getRecycleAnswerInfo();
      console.log(this.Visible);
    },
    link(item){
      this.$router.push({path:'/addAnswer',query: {id:item.id}});
    },
    changestate(item){
      item.questionStop=item.questionStop-1;
    },
   getAnswerInfo() {
      //分页查询所有试卷信息
      this.$axios({
        url: `/api/queryAll`,
        method: 'post',
      })
        .then(res => {
          let resData = res.data.data;
          if(resData !=null){
            
            this.resData = resData
          }

          this.answerTime();
          console.log(this.resData)
        })
        .catch(error => {});
        
    },
    answerTime(){    
      for(var i = 0;i<this.resData.length;i++){
            var date = new Date(this.resData[i].answerTime);
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            if(hours != NaN & minutes != NaN & seconds != NaN){
              // console.log(type(this.seconds))
              this.answerTimeList[i] = hours+' 时 '+minutes+' 分 '+seconds +' 秒 ';
   
            }else{
              this.answerTimeList[i] = "不限时";
            }
      }
    },
    
    getRecycleAnswerInfo() {
      //分页查询所有回收试卷信息
      this.$axios({
        url: `/api/queryRecycleAll`,
        method: 'post',
      })
        .then(res => {
          this.recycleData = res.data.data;
        })
        .catch(error => {});
    },
    fuzzySearchQuestionnaire(){
      this.$axios({
        url: `/api/fuzzySearchQuestionnaire`,
        method: 'post',
        data: {
          ...this.fuzzySearchInput
        }
      }).then(res=>{
        console.log(res)
        let searchData = res.data
        this.resData = searchData.data
        if(searchData.code == 400) { //错误提示
          this.$message({
            type: 'info',
            message: '暂无相关问卷',
            showClose: true,
            duration: 1000,
            center: true,
            dangerouslyUseHtmlString: true
          })

        }
      })
    },
    recycleQuestionnaire(recycleId){
      console.log(recycleId)  
      this.$axios({
          url: `/api/recycleQuestionnaireById`,
          method: 'post',
          data: {
            id:recycleId
          }
        }).then(res=>{
          this.getRecycleAnswerInfo();
          this.getAnswerInfo()
          this.$message({
            type: 'success',
            message: '恢复成功',
            showClose: true,
            duration: 1000,
            center: true,
            dangerouslyUseHtmlString: true
          })
        })
      },
    deleteQuestionnaire(deleteId){
      this.$axios({
        url: `/api/deleteQuestionnaireById`,
        method: 'post',
        data: {
          id:deleteId
        }
      }).then(res=>{
        let deleteResData = res.data

        if(deleteResData.code == 400) { //错误提示
          this.getAnswerInfo()
          this.$message({
              type: 'error',
              message: '该问卷已发布，无法删除该问卷',
              showClose: true,
              duration: 1000,
              center: true,
              dangerouslyUseHtmlString: true
             })
        }else if(deleteResData.code == 200){
          this.getAnswerInfo()
          this.$message({
              type: 'success',
              message: '删除成功，问卷被移入回收站',
              showClose: true,
              duration: 1000,
              center: true,
              dangerouslyUseHtmlString: true
             })
        }
      })
    }

  }
};
</script>
<style lang="less" scoped>

.exam {
  padding: 0px 40px;
  .page {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .edit {
    margin-left: 20px;
  }
  .el-table .tr {
    background-color: #DD5862 !important;
  }
}
  .el-table .warning-row {
    background: #000 !important;

  }

  .el-table .success-row {
    background: #DD5862;
  }

  .input[type="text" i] {
    padding: 1px 2px;
}
.fr{
  float: right;
  padding-top: 0;
  min-width: 80px;
  margin-top: 0;
  margin-bottom: 20px;
  width: 250px;
  margin-right: 20px;
  //border-bottom: 3px solid #d0d1d2;
}
.serarchbox{
  min-height: 20px;
  min-width: 90px;
  border-radius: 15px;
  padding-right: 20px;
}
.surveyCont_search .create-search {
  position: relative;
  margin-right: 20px;
}

.el-icon-delete{
  padding-left: 4%;
  padding-right: 6px;
  color:rgba(144, 144, 144,1) ;
}

.index_iconfont {
  font-family: "index_iconfont" !important;
  font-size: 16px;
  margin-right: 5px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400 !important;
  text-decoration: none;
  display: inline-block;
}

.surveyCont_search .create-search input {
  width: 236px;
  height: 20px;
  padding: 11px 12px 11px 16px;
  font-size: 14px;
  color: #bfbfbf;
  border-radius: 999px;
  border: 0;
  background: #fff;
  box-shadow: 0 0 2px 0 rgb(191 191 191);
}

input[type="text" i] {
  padding: 1px 2px;
}

input{
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  writing-mode: horizontal-tb !important;
  text-rendering: auto;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  appearance: auto;
  -webkit-rtl-ordering: logical;
  cursor: text;
  margin: 0em;
  padding: 1px 2px;
  border-width: 2px;
  border-style: inset;
  border-color: -internal-light-dark(rgb(118, 118, 118), rgb(133, 133, 133));
  border-image: initial;
  font-family: "Helvetica Neue",Helvetica,Arial,"PingFang SC","Microsoft YaHei","Microsoft YaHei UI","微软雅黑",sans-serif;
  font-size: 12px;
  color: #262626;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}


.process-box{
  line-height: 36px;
  margin-right: 14px;
}
.spinner-list{
  position: relative;
  cursor: default;
  height: 36px;
}
.el-icon-edit{
  color: rgba(255, 99, 71,0.55);
  font-size: 15px;
}
.el-icon-upload2{
  color: rgba(255, 169, 51, 0.65);
  font-size: 15px;
}
operation pull-right .el-icon-delete{
  color: rgba(255, 99, 71, 0.8);
  font-size: 15px;
}
//.spinner-list ul{
//  display: none;
//  position: absolute;
//  top: 100%;
//  left: 0;
//  z-index: 3;
//  width: 100%;
//  margin-top: -7px;
//  padding: 6px 0;
//  background-color: #FFF;
//  border-radius: 3px;
//  border: 1px solid #D9D9D9;
//  box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%);
//  -webkit-box-shadow: 0px 2px 10px 0px rgb(0 0 0 / 10%);
//  -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.1);
//}
.spinner-list a{
  font-size: 14px;
  color: #7a7a7a;
  margin-right: 20px;
}
//.spinner-list ul li,.spinner-list ul li a{
//  display: block;
//  font-size: 13px;
//  line-height: 33px;
//  color: #262626;
//  text-align: left;
//  white-space: nowrap;
//}
.questionnaireList{
  //border-top: 3px solid #d0d1d2;
  //border-left: 3px solid #d0d1d2;
  padding:10px;
  margin-left: 30px;
  margin-right: 30px;
  height: 400px;
  overflow:auto;
  clear: both;
}
.RecycleList{
  //border-top: 3px solid #d0d1d2;
  //border-left: 3px solid #d0d1d2;
  padding:10px;
  margin-left: 30px;
  margin-right: 30px;
  height: 400px;
  overflow:auto;
  clear: both;
}
.border{
  width: 1090px;
  height: 700px;
  margin-left: 93px;
  border:2px solid rgb(18, 66, 128);
  display: inline-block;
  position: fixed;
}
.questionnaire{
  background: #fff;
  border-radius: 2px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px 0 #f0f0f0;
  border: 1px solid #e6e6e6;
}
.Questionnaire-recycle{
  background: #fff;
  border-radius: 2px;
  margin-bottom: 20px;
  box-shadow: 0 0 4px 0 #f0f0f0;
  border: 1px solid #e6e6e6;
}
.operation{
  float: right;
  display: inline-block;
  //margin: 13px 24px 0;
  height: 36px;
  line-height: 36px;
  //padding-top: 18px;
  //padding-bottom: 18px;
  padding-right: 0;
  width: 300px;
  //border-top: 1px solid #f5f5f5;
}
.operation-recycle {
  float: right;
  display: inline-block;
  //margin: 13px 24px 0;
  height: 36px;
  line-height: 36px;
  //padding-top: 18px;
  //padding-bottom: 18px;
  padding-right: 0;
  width: 300px;
  //border-top: 1px solid #f5f5f5;
}
.describe{
  overflow: hidden;
  max-width: 510px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 7px;
  color: #1f1f1f;
  max-width: 272px;
}
.describe-recycle{
  overflow: hidden;
  max-width: 510px;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 7px;
  color: #1f1f1f;
  max-width: 272px;
}
.div{
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  display: block;
}
.item-top{
  padding: 13px 24px 0;
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  color: #262626;
}
.item-top-recycle{
  width: 100px;
  display: inline-block;
  padding: 13px 24px 0;
  font-size: 16px;
  height: 22px;
  line-height: 22px;
  color: #262626;


}
.manageQuestionnaire{
  margin-top: 0;
}
.item-bot{
  margin: 13px 24px 0;
  height: 36px;
  line-height: 36px;
  padding: 18px 0 18px;
  border-top: 1px solid #f5f5f5;
}
.item-bot-recycle{
  margin: 13px 24px 0;
  height: 36px;
  line-height: 36px;
  padding: 18px 0 18px;
  border-top: 1px solid #f5f5f5;
}
.pull-left{
  float: left !important;
}
.pull-left-recycle{
  float: left !important;
}
.pull-right{
  float: right !important;
}
.pull-right-recycle{
  float: right !important;

}
.nopublic{
  display: inline-block;
  border-radius: 4px;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  background: #a7aaad;
  *vertical-align: middle;
  position: relative;
  top: -1px;
}
.nopublic2{
  display: inline-block;
  border-radius: 4px;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  background: #5ca5ef;
  *vertical-align: middle;
  position: relative;
  top: -1px;
}
.item-id{
  margin-right: 14px;
  font-size: 12px;
}
.item-id-recycle{
  margin-right: 14px;
  font-size: 12px;
}
.item-draft{
  margin-right: 14px;
  font-size: 12px;
  cursor: auto;
}
.item-sheet{
  font-size: 12px;
  margin-right: 14px;
}
.item-sheet-recycle{
  font-size: 12px;
  margin-right: 14px;
}
.item-date{
  font-size: 12px;
  margin-left: 10px;
  margin-right: 0;
}
.item-date-recycle{
  font-size: 12px;
  margin-left: 10px;
  margin-right: 0;
  display: inline-block;
}
.a{
  text-decoration: none;
}
.operation>a{
  font-size: 12px;
  color: #7a7a7a;
  line-height: 36px;
  margin-left: 12px;
  margin-right: 14px;
}
.operation span{
  font-size: 15px;
}


</style>
